<script setup lang='ts'>
import { ref } from 'vue'
const confirmEvent = () => {
  console.log('1');
  
}
</script>

<template>
  <div class="content">
    <el-page-header :icon="null" title="admin">
      <template #content>
        <div class="flex">
          <el-avatar :size="32" class="mr-3"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
          <el-tag>普通管理员</el-tag>
        </div>
      </template>
      <template #extra>
        <div class="flex items-center">
          <el-popconfirm 
          confirm-button-text="是"
          cancel-button-text="否"
           @confirm="confirmEvent"
          title="是否退出登录？">
            <template #reference>
              <el-button type="primary" class="ml-2">退出登录</el-button>
            </template>
          </el-popconfirm>

        </div>
      </template>
    </el-page-header>
  </div>
</template>

<style scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 20px;
  background-color: #545c64;
}

.el-page-header {
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

.mr-3 {
  margin-left: 5px;
  margin-right: 5px;
}
</style>